<template>
  <li class="music_item" @click="$emit('play',item) ">
      <slot name="serial_number"></slot>
      <div class="music_item_c">
        <div class="music_title_box">
            <h3 v-html="$options.filters.matchStr(item.name,keywords)"></h3>
            <p>
                <i v-if="item.song.privilege.playMaxbr == 999000"></i>
                <!-- {{item.song.artists|concatStr}}-{{item.name}} -->
                <span v-html="$options.filters.matchStr($options.filters.concatStr(item.song.artists),keywords)"></span>
                -
                <span v-html="$options.filters.matchStr(item.name,keywords)"></span>
            </p>
        </div>
        <div class="play_icon">
            <i></i>
        </div>
      </div>
  </li>
</template>

<script>
// [8192,]
export default {
    name: "Music_search_item",
    filters:{
        concatStr(value){
            let str = ''
            value.forEach(item => {
                str += `${item.name}/`
            })
            return str.slice(0,-1);
        },
        matchStr(value,keywords){
            var rex = new RegExp(`${keywords}`,'i')
            return value.replace(rex,`<span style='color: red;'>${keywords}</span>`);
        }
    },
    props:{
        item:{
            type:Object,
            default:function(){
                return {}
            }
        },
        keywords:String
    }
};
</script>
<style lang="less" scoped>

    .music_item {
        // padding-left: 10px;
        padding-left: 1rem;
        display: flex;
        background-color: #ffff;
        justify-content: center;
        align-items: center;
        >span {
            // flex: 1;
            width: 4rem;
            // max-width: 40px;
            margin-left: -1rem;
            text-align: center;
            line-height: 5.1rem;
            font-size: 1.7rem;
            color: #999;
            &.red {
                color: #df3436;
            }
        }
        .music_item_c {
            display: flex;
            flex: 9;
            // padding: 6px 0px 6px;
            padding: .6rem 0px;
            // margin-left: 10px;
            border-bottom: 1px solid rgba(0,0,0,.1);
            .music_title_box {
                flex: 1;
                h3 {
                    // font-size: 17px;
                    margin: 10px 10px 10px 0px;
                    width: 29.3rem;
                    font-size: 1.2  rem;
                    font-weight: 400;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: normal;
                    color: #333;
                }
                p {
                    // font-size: 12px;
                    width: 29.3rem;
                    font-size: 0.7rem;
                    color: #888;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: normal;
                    vertical-align: middle;
                    i {
                        content:'';
                        display: inline-block;
                        // width: 12px;
                        width: 0.5rem;
                        // height: 8px;
                        height: .8rem;
                        // margin-right: 4px;
                        margin-right: .4rem;
                        background: url('https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=') no-repeat;
                        // background-size: 166px 97px;
                        background-size: 16.6rem 9.7rem;
                    }
                }
            }
            .play_icon {
                // width: 22px;
                width: 2.2rem;
                // padding: 0px 10px;
                padding: 0px 1rem;
                display: flex;
                justify-content: center;
                align-items: center;
                i {
                    // width: 22px;
                    width: 2.2rem;
                    // height: 22px;
                    height: 2.2rem;
                    background: url('https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=') no-repeat;
                    // background-position: -24px 0;
                    background-position: -2.4rem 0;
                    // background-size: 166px 97px;
                    background-size: 16.6rem 9.7rem;
                }
            }
        }
        
    }
</style>